<template>
	<modal :name="'confirmModal'">
		<div class="content">
			<h2>{{title}}</h2>
			<p><slot></slot></p>
		</div>
		<div class="footer">
			<span class="cancel" @click="cancel">取消</span>
			<span class="sure" @click="sure">确定</span>
		</div>
	</modal>
</template>

<script>
export default {

  name: 'index',

  props: {
  	title: String,
  	cancel: Function,
  	sure: Function
  }
};
</script>

<style lang="scss" scoped>
	.content{
		padding: 30px 0;
		text-align: center;

		h2{
			font-size: 32px;
			line-height: 80px;
		}
		p{
			width: 100%;
			text-align: center;
			line-height: 1.4;
			padding: 10px 20px;
			box-sizing: border-box;
			font-size: 24px;
		}
	}
	.footer{
		width: 100%;
		height: 100px;
		font-size: 0;
		border-top: 1px solid #dcdcdc;

		span{
			display: inline-block;
			width: 50%;
			height: 100px;
			line-height: 100px;
			text-align: center;
			font-size: 28px;

			&.cancel{
				color: #b9b9b9;
			}
			&.sure{
				color: #30c5c3;
			}
		}
	}
</style>